<template>
  <div id="app">
    <welcome></welcome>
    <div class="outter" :class="{'hideLeft':false}">
      <!--通用头部-->
      <header class="app-header">
        <s-header :pageName="pageName"></s-header>
      </header>
      <!--四个门面页 “微信” “通讯录” “发现” “我”-->
      <section class="app-content">
        <keep-alive>
          <router-view name="default"></router-view>
        </keep-alive>
      </section>
      <!--底部导航 路由 -->
      <footer class="app-footer">
        <s-nav></s-nav>
      </footer>
    </div>
    <transition name="custom-classes-transition" :enter-active-class="enterAnimate" :leave-active-class="leaveAnimate">
      <router-view name="subPage" class="sub-page"></router-view>
    </transition>
  </div>
</template>

<script>
  import welcome from './components/common/welcome.vue'
  import sHeader from './components/common/scada-header.vue'
  import sNav from './components/common/scada-nav.vue'
  export default {
    components: {
      sHeader,
      sNav,
      welcome
    },
    data() {
      return {
        "pageName": "",
        "routerAnimate": false,
        "enterAnimate": "", //页面进入动效
        "leaveAnimate": "", //页面离开动效
      }
    },
    watch: {
      // 监听 $route 为店内页设置不同的过渡效果
      "$route" (to, from) {
        const toDepth = to.path.split('/').length
        const fromDepth = from.path.split('/').length
        if (toDepth === 2) {
          this.headerHide = true;
          this.navHide = true;
          //this.$store.commit("setPageName", to.name)
        }
        //同一级页面无需设置过渡效果
        if (toDepth === fromDepth) {
          return;
        }
        this.enterAnimate = toDepth > fromDepth ? "animated fadeInRight" : "animated fadeInLeft"
        this.leaveAnimate = toDepth > fromDepth ? "animated fadeOutLeft" : "animated fadeOutRight"
        // 从店面页进入店内页 需要对店内页重新设置离开动效 因为他们处于不同 name 的 router-view
        if (toDepth === 3) {
          this.leaveAnimate = "animated fadeOutRight"
        }
      }
    }
  }
</script>

<style lang="scss">
  /*将公用的样式统一在此导入*/

  @import "assets/css/base.css";
  @import "assets/css/common.css";
  @import "assets/css/wx-header.css";
  /*阿里 fonticon*/

  @import "assets/css/lib/iconfont.css";
  /*过渡效果需要的动画库*/

  @import "assets/css/lib/animate.css";
  /*weui 样式库 非常适合高仿微信*/

  @import "assets/css/lib/weui.min.css";
</style>
